<template>
<div>

<el-row :gutter="20">
  <el-col :span="6" style="height:600px;">
  	
  	<div id="poster" 
  	v-bind:style="{ width: style.poster_w + 'px', height : style.poster_h + 'px' }">
  		<img :src="style.img" width="100%" >

  		<div id="qrcode" @mousedown="moveQRCode"
  		v-bind:style="{ 
  			width: style.qrcode_w + 'px', 
  			height : style.qrcode_h + 'px',
  			left : style.qrcode_l + 'px',
  			top : style.qrcode_t + 'px' }"
  		></div>

  		<div id="wxname" @mousedown="moveWXName"
  		v-bind:style="{ 
  			width: style.nickname_length + 'px', 
  			height : style.wxname_h + 'px',
  			left : style.wxname_l + 'px',
  			top : style.wxname_t + 'px'
  			}"
  		></div>


  	</div>


  </el-col>
  <el-col :span="18">
  	<el-form 
		:model="productShareAttr" 
		label-width="180px"
		>

		<el-form-item label="海报图片：" >
			<el-upload
			  :action="URL.upload"
			  :data="para"
			  :show-file-list="false"
			  :before-upload="beforeAvatarUpload"
			  :on-success="handleAvatarSuccess">
			  <el-button size="small" type="primary">点击上传</el-button>
			</el-upload>
		</el-form-item>

		<el-form-item label="图片尺寸：" >
			宽度：{{pic.w}}, 高度：{{pic.h}}
		</el-form-item>

		<el-form-item label="文字颜色：" >
			<el-color-picker v-model="style.nickname_color"></el-color-picker>
		</el-form-item>

		<el-form-item label="文字最大长度：" >
			<el-input v-model="style.nickname_length" placeholder="请输入文字最多个数" 
			style="width:300px;"></el-input>
		</el-form-item>

		<el-form-item >
		     <el-button type="primary" 
		     @click="save()">
		     保存</el-button>
		</el-form-item>

	</el-form>	
  </el-col>
</el-row>

</div>
</template>

<script>

import { mapGetters } from 'vuex'
import { imgUtil } from '../../../config/util'

export default {
	
	name : 'poster',
	
	data () {
		return {
		  	positionX:0,
    		positionY:0,

    		//用来显示的。
    		style : {
    			poster_w : 250,
    			poster_h : 445,
    			qrcode_w : 60,
    			qrcode_h : 60,
    			wxname_w : 100,
    			wxname_h : 18,

    			poster_l : 0,
    			poster_t : 0,
    			qrcode_l : 0,
    			qrcode_t : 0,
    			wxname_l : 0,
    			wxname_t : 0,

    			img : '',
    			nickname_color : '#333',
    			nickname_length : 100,

     		},

     		//最终结果
     		poster : {
     			'share_pic' : '',
     			'code' : '',
     			'title' : '',
     			'qrcode_size' : 1,
				'width' : 0,
				'height' : 0,
				'nickname_width' : 0,
				'nickname_height' : 0,
				'nickname_size' : 12,
				'nickname_color' : '#333333',
				'nickname_length' : 100,
     		},

     		pic : {
     			w : 0,
     			h : 0,
     		},
		}
	},

	props : {
		productDetail : Object,
	},

	components : {
		
	},

	computed : {
		...mapGetters([
			'productShareAttr',
			'userInfo',
			'URL',
			'common',
		]),

		para () {
			return {
				dir : this.userInfo.company_code + '/poster/',
			}
		},

		
	},

	methods : {
		moveQRCode(e){
	      let odiv = e.target;    //获取目标元素
	       
	      //算出鼠标相对元素的位置
	      let disX = e.clientX - odiv.offsetLeft;
	      let disY = e.clientY - odiv.offsetTop;
	      document.onmousemove = (e)=>{    //鼠标按下并移动的事件
	        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
	        let left = e.clientX - disX;  
	        let top = e.clientY - disY;

	        // ---------- 控制边界 ---------- //
	        //左上角
	        if(left < 0) left = 0;
	        if(top < 0) top = 0;
	        //右上角
	        if(left > this.style.poster_w - this.style.qrcode_w){
	        	left = this.style.poster_w - this.style.qrcode_w;
	        }
	        //左下角
	        if(top > this.style.poster_h - this.style.qrcode_h){
	        	top = this.style.poster_h - this.style.qrcode_h;
	        }
	        // ---------- 控制边界 ---------- //
	         
	        //绑定元素位置到positionX和positionY上面
	        this.positionX = top;
	        this.positionY = left;

	        this.style.qrcode_l = left;
	        this.style.qrcode_t = top;
	         
	        //移动当前元素
	        //odiv.style.left = left + 'px';
	        //odiv.style.top = top + 'px';

	        // console.log(left);
	        // console.log(top);
	      };
	      document.onmouseup = (e) => {
	        document.onmousemove = null;
	        document.onmouseup = null;
	      };
	    },


	    moveWXName (e) {
	    	let odiv = e.target;    //获取目标元素
	       
		      //算出鼠标相对元素的位置
		      let disX = e.clientX - odiv.offsetLeft;
		      let disY = e.clientY - odiv.offsetTop;
		      document.onmousemove = (e)=>{    //鼠标按下并移动的事件
		        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
		        let left = e.clientX - disX;  
		        let top = e.clientY - disY;

		        // ---------- 控制边界 ---------- //
		        //左上角
		        if(left < 0) left = 0;
		        if(top < 0) top = 0;
		        //右上角
		        if(left > this.style.poster_w - this.style.wxname_w){
		        	left = this.style.poster_w - this.style.wxname_w;
		        }
		        //左下角
		        if(top > this.style.poster_h - this.style.wxname_h){
		        	top = this.style.poster_h - this.style.wxname_h;
		        }
		        // ---------- 控制边界 ---------- //
		         
		        //绑定元素位置到positionX和positionY上面
		        this.positionX = top;
		        this.positionY = left;

		        this.style.wxname_l = left;
	        	this.style.wxname_t = top;
		         
		        //移动当前元素
		        // odiv.style.left = left + 'px';
		        // odiv.style.top = top + 'px';

		        // console.log(left);
		        // console.log(top);
		      };
		      document.onmouseup = (e) => {
		        document.onmousemove = null;
		        document.onmouseup = null;
		      };
	    },

	    async biLi () {
			if(this.style.img == '') return 0;
			let theImage = await imgUtil(this.style.img);
            this.pic.w = theImage.width;
            this.pic.h = theImage.height;
            return {
            	x : theImage.width / this.style.poster_w,
            	y : theImage.height / this.style.poster_h,
            };
		},

	    getData () {
	    	let para = {
				sale_code : this.productDetail.sale_code,
				cb : this.cb,
			};
			this.$store.dispatch('getProductShareAttr', para);
	    },


	    async cb () {

	    	//console.log(this.productDetail);
			//获取到比例，将数据库中的数据通过比例换算到界面中。
			this.style.img = this.productDetail.img;

			let b = await this.biLi();

			// console.log('b');
			// console.log(b);

			if(b.x != 0){
				this.style.qrcode_l = this.productDetail.qrcode_l / b.x;
				this.style.qrcode_t = this.productDetail.qrcode_t / b.y;

				this.style.wxname_l = this.productDetail.wxname_l / b.x;
				this.style.wxname_t = this.productDetail.wxname_t / b.y;

				this.style.nickname_color = this.productDetail.wxname_color;
				this.style.nickname_length = this.productDetail.wxname_length;
			}
	    },


	    beforeAvatarUpload (file) {
	        const isLtM = file.size / 1024 / 1024 < this.common.imgMaxSize;

	        if (!isLtM) {
	          this.$message.error('上传图片大小不能超过 ' + this.common.imgMaxSize + 'MB!');
	        }
	        return isLtM;
		},
		
	    handleAvatarSuccess (res, file) {
	    	this.style.img = res.url;
	    },

	    async save () {
	    	if(this.style.img == ''){
	    		this.$notify({
		          title: '警告',
		          message: '请上传海报图片',
		          type: 'warning'
		        });	 
	    	}

	    	let b = await this.biLi();

	    	let para = {
	    		fun : 'updatePoster',
	    		code : this.productDetail.sale_code,

	    		//title : this.productDetail.name,
	    		img : this.style.img,
	    		qrcode_l : this.style.qrcode_l * b.x,
	    		qrcode_t : this.style.qrcode_t * b.y,

	    		wxname_l : this.style.wxname_l * b.x,
	    		wxname_t : this.style.wxname_t * b.y,

	    		qrcode_size : parseInt(1 * b.x) == 0 ? 1 : parseInt(1 * b.x),

	    		wxname_size : parseInt(12 * b.y) == 0 ? 1 : parseInt(12 * b.y),

	    		wxname_length : this.style.nickname_length,
	    		wxname_color : this.style.nickname_color,
	    		cb : res => {
					this.$notify({
			          title: '成功',
			          message: '保存成功',
			          type: 'success'
			        });
				},
				err : res => {
					this.$notify({
			          title: '保存失败',
			          message: res,
			          type: 'error'
			        });
				}
	    	};

	    	this.$store.dispatch('update', para);
	    },
	},

	watch : {
	    
	},

	mounted () {
		this.cb();
	},

}
</script>

<style scoped>
#poster{
	position: absolute;   /*定位*/
    /*top: 10px;
    left: 10px;*/
	/*width: 250px;
	height: 445px;*/
	background: #aaa;
}

#qrcode{
	position: absolute;   /*定位*/
    /*top: 10px;
    left: 10px;*/
	/*width: 60px;
	height: 60px;*/
	background-color: #666;
	cursor: move;
}

#wxname {
	position: absolute;   /*定位*/
    /*top: 100px;
    left: 10px;*/
	/*width: 60px;
	height: 60px;*/
	background-color: #000;
	cursor: move;
}
</style>
